<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="EndGam Gaming Magazine Template" />
    <title>EndGam - Gaming Magazine Template</title>
    <!-- Favicon 网站图标-->
    <link href="img/favicon.ico" rel="shortcut icon" />
    <!-- 引入WOW动画库 -->
    <link rel="stylesheet" href="./css/animate.min.css" />

    <!-- 引入bootstrap核心css文件 -->
    <link rel="stylesheet" href="./css/bootstrap.min.css" />

    <!-- swiper -->
    <link rel="stylesheet" href="./css/swiper-bundle.min.css" />

    <!-- 引入图标文件 twitter facebook等 -->
    <link rel="stylesheet" href="css/font-awesome.min.css" />

    <!-- 引入less文件此处必须添加 /less  ！！！ -->
    <!-- 引入重置样式文件 -->
    <link rel="stylesheet/less" href="./css/reset.less" />

    <!-- 引入公共样式 -->
    <link rel="stylesheet/less" href="./css/common.less" />
    <link rel="stylesheet/less" href="./css/index.less" />
  </head>
  <body>
    <!-- Page Preloder 加载界面-->
    <div id="preloder">
      <div class="loader"></div>
    </div>

    <!-- Header 头部 -->
    <header>
      <!-- 导航栏 -->
      <nav class="navbar navbar-expand-lg">
        <a class="site-logo" href="index.html"><img src="./img/logo.png" alt="" /></a>
        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="./Index.html">主页</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="./games.html">游戏</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="./reviews.html">前瞻</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">新闻</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="./contact.html">联系我们</a>
            </li>
          </ul>
        </div>
      </nav>
    </header>

    <!-- Header end -->

    <!-- Banner -->
    <div class="banner_box">
      <div class="banner">
        <div class="header-social d-flex justify-content-end">
          <p1>关注我们:</p1>
          <a href="#"><i class="fa fa-pinterest"></i></a>
          <a href="#"><i class="fa fa-facebook"></i></a>
          <a href="#"><i class="fa fa-twitter"></i></a>
          <a href="#"><i class="fa fa-dribbble"></i></a>
          <a href="#"><i class="fa fa-behance"></i></a>
        </div>
        <h2>Game on!</h2>
        <p>
          Fusce erat dui, venenatis et erat in, vulputate dignissim lacus. Donec vitae tempus dolor,<br />sit amet elementum lorem. Ut cursus tempor
          turpis.
        </p>
        <a href="#" class="site-btn">了解更多 <img src="img/icons/double-arrow.png" alt="#" /></a>
      </div>
    </div>
    <!-- Banner end -->

    <!-- Intro section 介绍部分-->
    <section class="intro-section">
      <div class="container">
        <div class="row">
          <div class="col-md-4">
            <div class="intro-text-box">
              <div class="top-meta">11.11.18 / in <a href="">Games</a></div>
              <h3>The best online game is out now!</h3>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum
                suspendisse ultrices gravida....
              </p>
              <a href="#" class="read-more">Read More <img src="img/icons/double-arrow.png" alt="#" /></a>
            </div>
          </div>
          <div class="col-md-4">
            <div class="intro-text-box">
              <div class="top-meta">11.11.18 / in <a href="">Playstation</a></div>
              <h3>Top 5 best games in november</h3>
              <p>
                Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum
                labore suspendisse ultrices gravida....
              </p>
              <a href="#" class="read-more">Read More <img src="img/icons/double-arrow.png" alt="#" /></a>
            </div>
          </div>
          <div class="col-md-4">
            <div class="intro-text-box">
              <div class="top-meta">11.11.18 / in <a href="">Reviews</a></div>
              <h3>Get this game at a promo price</h3>
              <p>
                Sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse
                ultrices gravida ncididunt ut labore ....
              </p>
              <a href="#" class="read-more">Read More <img src="img/icons/double-arrow.png" alt="#" /></a>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- Intro section end -->

    <!-- Bolg section -->
    <section class="blog-section">
      <div class="container">
        <div class="row">
          <div class="col-xl-9 col-lg-8 col-md-7">
            <div class="bolg-title">
              <h2>Latest News</h2>
            </div>
            <ul class="blog-filter">
              <li><a href="#">Racing</a></li>
              <li><a href="#">Shooters</a></li>
              <li><a href="#">Strategy</a></li>
              <li><a href="#">Online</a></li>
            </ul>

            <!-- Blog item -->
            <div class="blog-item">
              <div class="blog-img">
                <img src="./img/blog/1.jpg" alt="" />
              </div>
              <div class="blog-text">
                <div class="top-meta">11.11.18 / in <a href="">Games</a></div>
                <h3>The best online game is out now!</h3>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eius-mod tempor incididunt ut labore et dolore magna aliqua. Quis
                  ipsum suspendisse ultrices gravida. Lorem ipsum dolor sit amet, consecte-tur adipiscing elit, sed do eiusmod tempor incididunt ut
                  labore et dolore magna aliqua.....
                </p>
                <a href="./game-detail.html" class="read-more">Read More <img src="img/icons/double-arrow.png" alt="#" /></a>
              </div>
            </div>
            <!-- Blog item -->
            <div class="blog-item">
              <div class="blog-img">
                <img src="./img/blog/2.jpg" alt="" />
              </div>
              <div class="blog-text">
                <div class="top-meta">11.11.18 / in <a href="">Games</a></div>
                <h3>The best online game is out now!</h3>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eius-mod tempor incididunt ut labore et dolore magna aliqua. Quis
                  ipsum suspendisse ultrices gravida. Lorem ipsum dolor sit amet, consecte-tur adipiscing elit, sed do eiusmod tempor incididunt ut
                  labore et dolore magna aliqua.....
                </p>
                <a href="#" class="read-more">Read More <img src="img/icons/double-arrow.png" alt="#" /></a>
              </div>
            </div>
            <!-- Blog item -->
            <div class="blog-item">
              <div class="blog-img">
                <img src="./img/blog/3.jpg" alt="" />
              </div>
              <div class="blog-text">
                <div class="top-meta">11.11.18 / in <a href="">Games</a></div>
                <h3>The best online game is out now!</h3>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eius-mod tempor incididunt ut labore et dolore magna aliqua. Quis
                  ipsum suspendisse ultrices gravida. Lorem ipsum dolor sit amet, consecte-tur adipiscing elit, sed do eiusmod tempor incididunt ut
                  labore et dolore magna aliqua.....
                </p>
                <a href="#" class="read-more">Read More <img src="img/icons/double-arrow.png" alt="#" /></a>
              </div>
            </div>
          </div>
          <div class="col-xl-3 col-lg-4 col-md-5 sidebar">
            <!-- 大容器没样式 -->
            <div class="sidebar-item">
              <!-- 第一个部分 -->
              <div class="widget-item">
                <h4>Trending</h4>
                <!-- 第一个部分内容 -->
                <div class="trending-widget">
                  <div class="tw-item">
                    <div class="tw-img">
                      <img src="./img/blog-widget/1.jpg" alt="#" />
                    </div>
                    <div class="tw-text">
                      <div class="top-meta">11.11.18 / in <a href="">Games</a></div>
                      <h5>The best online game is out now!</h5>
                    </div>
                  </div>
                  <div class="tw-item">
                    <div class="tw-img">
                      <img src="./img/blog-widget/2.jpg" alt="#" />
                    </div>
                    <div class="tw-text">
                      <div class="top-meta">11.11.18 / in <a href="">Games</a></div>
                      <h5>The best online game is out now!</h5>
                    </div>
                  </div>
                  <div class="tw-item">
                    <div class="tw-img">
                      <img src="./img/blog-widget/3.jpg" alt="#" />
                    </div>
                    <div class="tw-text">
                      <div class="top-meta">11.11.18 / in <a href="">Games</a></div>
                      <h5>The best online game is out now!</h5>
                    </div>
                  </div>
                  <div class="tw-item">
                    <div class="tw-img">
                      <img src="./img/blog-widget/4.jpg" alt="#" />
                    </div>
                    <div class="tw-text">
                      <div class="top-meta">11.11.18 / in <a href="">Games</a></div>
                      <h5>The best online game is out now!</h5>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 第二个部分 -->
              <div class="widget-item">
                <div class="categories-widget">
                  <h4 class="widget-title">categories</h4>
                  <ul>
                    <li><a href="">Games</a></li>
                    <li><a href="">Gaming Tips & Tricks</a></li>
                    <li><a href="">Online Games</a></li>
                    <li><a href="">Team Games</a></li>
                    <li><a href="">Community</a></li>
                    <li><a href="">Uncategorized</a></li>
                  </ul>
                </div>
              </div>
              <div class="widget-item">
                <a href="#" class="add">
                  <img src="./img/add.jpg" alt="" />
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- Blog section end -->

    <!-- Intro video section -->
    <section class="intro-video-section d-flex align-items-end">
      <a href="https://www.youtube.com/watch?v=uFsGy5x_fyQ" class="video-play-btn"><img src="img/icons/solid-right-arrow.png" alt="#" /></a>
      <div class="container">
        <div class="video-text">
          <h2>Promo video of the game</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
        </div>
      </div>
    </section>
    <!-- Intro video section end -->

    <!-- Featured section -->
    <section class="featured-section">
      <div class="featured-bg"></div>
      <div class="featured-box">
        <div class="top-meta">11.11.18 / in <a href="">Games</a></div>
        <h3>The game you’ve been waiting for is out now</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum
          suspendisse ultrices gravida. Ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
          aliquamet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vestibulum posuere porttitor
          justo id pellentesque. Proin id lacus feugiat, posuere erat sit amet, commodo ipsum. Donec pellentesque vestibulum metus...
        </p>
        <a href="#" class="read-more">Read More <img src="img/icons/double-arrow.png" alt="#" /></a>
      </div>
    </section>
    <!-- Featured section end-->

    <!-- Newsletter section -->
    <section class="newsletter-section">
      <div class="container">
        <h2>Subscribe to our newsletter</h2>
        <form class="newsletter-form">
          <input type="text" placeholder="ENTER YOUR E-MAIL" />
          <button class="site-btn">subscribe <img src="img/icons/double-arrow.png" alt="#" /></button>
        </form>
      </div>
    </section>
    <!-- Newsletter section end -->

    <!-- Footer section -->
    <section class="footer-section">
      <div class="container">
        <div class="footer-left-pic">
          <img src="img/footer-left-pic.png" alt="" />
        </div>
        <div class="footer-right-pic">
          <img src="img/footer-right-pic.png" alt="" />
        </div>
        <a href="#" class="footer-logo">
          <img src="./img/logo.png" alt="" />
        </a>
        <ul class="footer-menu">
          <li><a href="">Home</a></li>
          <li><a href="">Games</a></li>
          <li><a href="">Reviews</a></li>
          <li><a href="">News</a></li>
          <li><a href="">Contact</a></li>
        </ul>
        <div class="footer-social d-flex justify-content-center">
          <a href="#"><i class="fa fa-pinterest"></i></a>
          <a href="#"><i class="fa fa-facebook"></i></a>
          <a href="#"><i class="fa fa-twitter"></i></a>
          <a href="#"><i class="fa fa-dribbble"></i></a>
          <a href="#"><i class="fa fa-behance"></i></a>
        </div>
        <div class="copyright"><a href="">Colorlib</a> 2018 @ All rights reserved</div>
      </div>
    </section>
    <!-- Footer section end -->
  </body>
</html>

<!-- 引入jq -->
<script src="./js/jquery-3.5.1.min.js"></script>

<!-- 引入bootstrap.js -->
<script src="./js/bootstrap.min.js"></script>

<!-- swiper -->
<script src="./js/swiper-bundle.min.js"></script>

<!-- 引入wow -->
<script src="./js/wow.min.repeat.js"></script>

<!-- 引入less -->
<script src="./js/less-4.1.3.js"></script>

<!-- 引入主要js -->
<script src="./js/main.js"></script>
